<template>
  <div class="myLottery">
    <div class="accountInput displayFlex">
      <section class="dateQueryBox">
        <div class="dateQueryItem" v-for="(dateItem,dateIndex) in date"><span class="dateItem"
                                                                              :class="{on:dateIndex==currentDateIndex}"
                                                                              @click="dateQuery(dateIndex)">{{dateItem}}</span><span
            class="line" v-if="dateIndex!=(date.length-1)">|</span></div>
      </section>
      <section class="myDatePickerBox displayFlex">
        <div class="datePickerItem">
          <DatePicker v-model="submitData.startStr" type="date" @on-change="changeStartTime" placeholder="请选择..."
                      style="width: 200px"></DatePicker>
        </div>
        <div class="datePickerItem">
          <DatePicker v-model="submitData.endStr" type="date" @on-change="changeEndTime" placement="bottom-end"
                      placeholder="请选择..." style="width: 200px"></DatePicker>
        </div>
    
      </section>
      <section class="accountBtnCx">
        <p @click="accountCxEvent">查询</p>
      </section>
    </div>
    <div class="profitTheList displayFlex">
      <div class="profitListItem">
        <div class="listItemTitle">
          <p>
            <span class="relative">净盈亏(元)
              <div class="profitLossFormula">
                <Tooltip :content='formula[1]' :transfer=transferLog placement="top-start"><span><Icon type="help-circled" class="help"></Icon>公式</span></Tooltip>
              </div>
            </span>
          </p>
          <p>{{profitListData.sumNetProfitAndLoss||'0'}}</p>
        </div>
        <div class="listItemContent">
          <ul>
            <li class='profitLossInfo displayFlex'>
              <div class="profitLossItem">
                <p>充值总额</p>
                <p>{{profitListData.sumRechargeAmount||'0'}}</p>
              </div>
              <div class="profitLossItem">
                <p>总优惠</p>
                <p>{{profitListData.sumGiftAmount||'0'}}</p>
              </div>
            </li>
            <li class='displayFlex'>
              <div class="profitLossItem">
                <p>提现总额</p>
                <p>{{profitListData.sumWithdrawAmount||'0'}}</p>
              </div>
              <div class="profitLossItem">
                <p>优惠扣除</p>
                <p>{{profitListData.sumActiveWithdrawAmount||'0'}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="profitListItem">
        <div class="listItemTitle">
          <p>
            <span class="relative">游戏盈亏(元)
             <div class="profitLossFormula">
                <Tooltip class="profitLoss" :content='formula[0]' :transfer=transferLog placement="top-start">
              <span><Icon type="help-circled" class="help"></Icon>公式</span>
          </Tooltip>
              </div>
            </span>
        
          </p>
          <p class="red">{{profitListData.sumGameProfitAndLoss||'0'}}</p>
        </div>
        <div class="listItemContent">
          <ul>
            <li class='profitLossInfo displayFlex'>
              <div class="profitLossItem">
                <p>投注总额</p>
                <p>{{profitListData.sumBetAmount||'0'}}</p>
              </div>
              <div class="profitLossItem">
                <p>彩票返水</p>
                <p>{{profitListData.sumRebateAmount||'0'}}</p>
              </div>
            </li>
            <li class='profitLossInfo displayFlex'>
              <div class="profitLossItem">
                <p>中奖金额</p>
                <p>{{profitListData.sumWinAmount||'0'}}</p>
              </div>
              <div class="profitLossItem">
                <p>下级返点</p>
                <p>{{profitListData.sumCommissionAmount||'0'}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="profitListItem">
        <div class="listItemTitle">
          <p>
            <span class="relative">电游盈亏(元)
             <div class="profitLossFormula">
                <Tooltip class="profitLoss" :content='formula[2]' :transfer=transferLog placement="top-end">
              <span><Icon type="help-circled" class="help"></Icon>公式</span>
          </Tooltip>
              </div>
            </span>
      
          </p>
          <p>{{profitListData.totalFgResult||'0'}}</p>
        </div>
        <div class="listItemContent">
          <ul>
            <li class='profitLossInfo displayFlex'>
              <div class="profitLossItem">
                <p>电游存入</p>
                <p>{{profitListData.totalFgRollIn||'0'}}</p>
              </div>
              <div class="profitLossItem">
                <p>电游投注</p>
                <p>{{profitListData.totalFgBetAmount||'0'}}</p>
              </div>
            </li>
            <li class='profitLossInfo displayFlex'>
              <div class="profitLossItem">
                <p>电游转出</p>
                <p>{{profitListData.totalFgRollOut||'0'}}</p>
              </div>
              <div class="profitLossItem">
                <p>电游中奖</p>
                <p>{{profitListData.totalFgWinAmount||'0'}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="myLotteryLine">
      <img :src="lineImg" alt="">
    </div>
    <div class="latestBetting">
      <div class="betRecNav displayFlex">
        <div class="betRecNavItem" :class="{on:curRecNav == recNavIndex}" v-for="(recNavItem,recNavIndex) in betNavData"><p @click="betRecNavEvent(recNavIndex)">{{recNavItem}}</p><span v-if="recNavIndex<betNavData.length-1">|</span></div>
      </div>
      <div class="bettingTable">
        <ul class="bettingTableItem bettingTableTitle displayFlex" :class="{fgBetTabTitInfo:curRecNav == '1'}">
          <li v-for="tableTitleItem in bettingTableTitleData">{{tableTitleItem}}</li>
        </ul>
        <!--最新投注-->
        <div class="tableContent myLotteryTable" v-if="curRecNav == '0'">
          <ul v-if="latestBettingData.length>0" class="bettingTableItem bettingTableInfo displayFlex" v-for="userInfo in latestBettingData">
            <li><p>{{_Util.formatDateTime(userInfo.actionTime)}}</p></li>
            <li><p class="relative"><i :class="{officialIcon:false,creditIcon:true}"></i>{{userInfo.lotteryName}}</p>
              <p>玩法:{{userInfo.playedGroupName}}-{{userInfo.playedName}}</p></li>
            <li><p>{{userInfo.odds}}</p></li>
            <li><p>{{userInfo.amount}}</p></li>
            <li><p>{{userInfo.bonus}}</p></li>
            <li><p class="one-txt-cut" :title='userInfo.lotteryNo'>{{userInfo.lotteryNo || '------'}}</p><p>期号:{{userInfo.actionNo}}</p></li>
            <li>
              <p :class="{'red': parseInt(userInfo.status) === 4, 'green': parseInt(userInfo.status) === 1}">{{userInfo.statusText}}</p></li>
            <li>
              <router-link :to="{name:'recordDetail',query:{orderId:userInfo.orderId,treeIndex:'2'}}" class="relative" tag='p'><i class="viewDetailsIcon"></i>查看详情</router-link>
            </li>
          </ul>
          <div  v-if="latestBettingData.length>0" class="moreRecord"><router-link :to="{name:'bettingRecord',query:{id:2,betType:0}}">查看更多投注记录</router-link><Icon type="ios-arrow-right" class="rightArrow"></Icon></div>
          <div class="emptyData" v-else>
            <img :src="emptyDataIcon" alt="">
            <p>近期没有投注记录</p>
          </div>
        </div>
        <!--电游投注记录-->
        <div class="tableContent myLotteryTable" v-if="curRecNav == '1'">
          <ul v-if="latFgBetData.length>0" class="bettingTableItem bettingTableInfo fgBetListInfo displayFlex" v-for="userInfo in latFgBetData">
            <li><p>{{userInfo.createTime}}</p></li>
            <li><p class="relative">{{userInfo.gameName}}</p></li>
            <li><p>{{userInfo.orderId}}</p></li>
            <li><p>{{userInfo.allBets}}</p></li>
            <li><p>{{userInfo.allWins}}</p></li>
            <li><p :class="{'red': parseInt(userInfo.result)<0, 'green': parseInt(userInfo.result) >0}">{{userInfo.result}}</p></li>
          </ul>
          <div  v-if="latFgBetData.length>0" class="moreRecord"><router-link :to="{name:'bettingRecord',query:{id:2,betType:1}}">查看更多投注记录</router-link><Icon type="ios-arrow-right" class="rightArrow"></Icon></div>
          <div class="emptyData" v-else>
            <img :src="emptyDataIcon" alt="">
            <p>近期没有投注记录</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './main.scss';
  export default {
    data() {
      return {
        userHead: require('../../../assets/images/personal/myLottery/Head-portrait.png'),
        bettingTableTitleData: ['投注时间', '彩种玩法', '奖金/赔率', '投注金额', '中奖金额', '开奖号码 & 期号','状态', '操作'],
        betNavData:['彩票游戏投注','电子游戏投注'],//最新投注数据
        curRecNav:0,//最新投注导航下标
        latestBettingData: [],//最新彩票投注数据
        latFgBetData: [],//电游投注数据
        lineImg:require('../../../assets/images/personal/myLottery/line.png'),//分割线
        emptyDataIcon:require('../../../assets/images/personal/myLottery/emptyData.png'),//空数据
        //个人盈亏
        profitList: {
          title: ['充值总额', '提现总额', '投注总额', '派奖总额', '下级返点', '彩票返水', '优惠活动', '优惠扣除', '游戏盈亏', '净盈亏'],
          data: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        },
        profitListData: '',
        submitData: {},
        transferLog: true,
        currentDateIndex: 0,
        date: ['全部', '今日', '昨日'],
        formula: ['游戏盈亏公式：中奖金额 - 投注 + 彩票返水', '净盈亏公式=中奖金额 - 投注 + 彩票返水 +下级返点 + 活动优惠 - 优惠扣除','电游盈亏(元)：电游中奖 - 电游投注'],//公式文案
      }
    },
    activated() {
      this.initData();
    },
    deactivated() {},
    methods: {
      initData() {
        let that = this;
        that.submitData = {};
        that.curRecNav = 0;
        that.accountCxEvent();
      },
      dateQuery(index) {
        let that = this;
        that.currentDateIndex = index;
        if (index == '0') {
          that.submitData = {};
        }
        if (index == '1') {
          that.submitData = {
            startStr: that._Util.currentDateYear(0) || '',
            endStr: that._Util.currentDateYear(0) || '',
          };
        }
        if (index == '2') {
          that.submitData = {
            startStr: that._Util.currentDateYear(-1) || '',
            endStr: that._Util.currentDateYear(-1) || '',
          };
        }
        that.accountCxEvent();
      },
      //改变开始时间
      changeStartTime(val) {
        this.submitData.startStr = val;
      },
      //改变结束时间
      changeEndTime(val) {
        this.submitData.endStr = val;
      },
      //个人盈亏-查询
      accountCxEvent() {
        let that = this;
        if(this.submitData.startStr){
          this.submitData.startStr = that._Util.formatDateTime2(this.submitData.startStr);
          this.submitData.endStr = that._Util.formatDateTime2(this.submitData.endStr);
        }
        that._Util.post(that, that._Api.POST_PROFIT_LOSS_DATA, that.submitData, (data) => {
          that.profitListData = data.profitLoss || {};
          that.latestBettingData = data.orderInfo || [];
        });
      },
      //最新投注导航切换
      betRecNavEvent(index){
        this.curRecNav = index;
        if(index=='0'){
          this.bettingTableTitleData= ['投注时间', '彩种玩法', '奖金/赔率', '投注金额', '中奖金额', '开奖号码 & 期号','状态', '操作'];
        }
        if(index=='1'){
          this.bettingTableTitleData= ['投注时间', '彩种玩法', '订单号', '投注金额', '中奖金额', '输赢'];
          this.getFgBetData();
        }
      },
      //获取电游投注记录
      getFgBetData(){
        let that = this;
        let params = {
          pageSize: 15,
          pageNum: 1,
        }
        that._Util.post(that, that._Api.GET_FG_BET_LIST_DATA, params, (data) => {
          that.latFgBetData = data.result || [];
        });
      }
    },
    components: {},
    watch: {}
  }
</script>

<style lang="css" rel="styleheet/css" scoped>

</style>
